<template>
  <view
    class="get-card"
    v-if="detailData.verify_card_info && shenheStatus == 0"
  >
    <image
      :src="asyncImgs.my_coupon.coupon_bg"
      mode="aspectFill"
      class="top-img"
    />
    <view class="getBox">
      <view class="cardBox">
        <view class="top">
          <view class="name">
            <text>{{ detailData.verify_card_info.name }}</text>
            <text>{{ detailData.verify_card_info | dateText }}</text>
          </view>
          <view class="price">
            <view class="money">
              <text>￥</text>
              <text>{{ detailData.verify_card_info.price }}</text>
            </view>
            <text class="title">卡券价值</text>
          </view>
        </view>
        <view class="bottom" @click="showDetail = !showDetail">
          <view
            class="detailInfo"
            v-html="detailData.verify_card_info.content"
            v-if="showDetail"
          ></view>
          <view class="detail">
            <template v-if="!showDetail">
              <text>详细信息</text>
              <text class="iconfont icon-arrow-down"></text>
            </template>
            <template v-else>
              <text>收起</text>
              <text class="iconfont icon-arrow-up"></text>
            </template>
          </view>
        </view>
      </view>
      <view :class="['getBtn', disabled ? 'disabled' : '']">
        <text
          v-if="detailData.is_can_give == 1 && detailData.is_trans_send == 0"
          @click="getCardBt"
          >立即领取</text
        >
        <text v-if="detailData.is_can_give == 0">已失效</text>
        <text v-if="detailData.is_trans_send == 1">已领取</text>
      </view>
    </view>
    <!-- <scroll-view scroll-y class="bottom-scroll">
      <view class="item">
        <image
          src="https://chidian.chixiaodian.com/web/uploads/images/store_1/2021-12-13/9c9cbe9f2d15f54845aa222dcb318f7791730838.png"
          mode="aspectFill"
        />

        <view class="flex-y-center flex-x-sb">
          <image
            :src="detailData.verify_card_info.pic_url"
            mode="aspectFill"
            class="left-image"
          />
          <view class="right-box flex-x-sb">
            <view class="right-content">
              <view>{{ detailData.verify_card_info.name }}</view>
              <view>
                有效期：
                <span>{{ detailData.verify_card_info | dateText }}</span>
              </view>
            </view>
            <view class="right-price-bt">
              <view
                ><span style="font-size: 24rpx">价值￥</span
                >{{ detailData.verify_card_info.price }}</view
              >
              <view class="right-bt" @click="getCardBt">立即领取</view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view> -->
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from '@/components/shenhe/shenhe';
export default {
  components: { Shenhe },
  data() {
    return {
      modalShow: false,
      id: '',
      detailData: '',
      // 是否展示详细信息
      showDetail: false,
      // 是否失效
      isDisabled: false,
    };
  },
  onLoad(params) {
    this.id = params.id;
    this.getDetail();
  },
  filters: {
    // 日期格式化
    dateText(val) {
      if (!val) return;
      if (val.date_type == 1) {
        if (val.expire_day > 0) {
          return `领取后${val.expire_day}天有效`;
        } else {
          return `领取后永久天有效`;
        }
      } else if (val.date_type == 2) {
        return `${val.begin_time}~${val.end_time}`;
      } else {
        return '';
      }
    },
  },
  methods: {
    async getDetail() {
      const res = await this.$allrequest.coupon.verifyDetail(
        { sale_id: this.id },
        true
      );
      if (res.code == 0) {
        this.detailData = res.data.list;
        if (this.detailData.is_can_give == 0) {
          uni.showToast({
            title: '卡券已失效',
            icon: 'none',
          });
          setTimeout(() => {
            uni.switchTab({
              url: '/pages/home/home',
            });
          }, 2000);
        }
        if (this.detailData.is_trans_send == 1) {
          uni.showToast({
            title: '卡券已领取',
            icon: 'none',
          });
          setTimeout(() => {
            uni.switchTab({
              url: '/pages/home/home',
            });
          }, 2000);
        }
      }
    },
    //   点击领取
    async getCardBt() {
      const res = await this.$allrequest.coupon.verifyReceive({
        sale_id: this.id,
      });
      if (res.code == 0) {
        uni.showToast({
          title: '领取成功',
          icon: 'none',
        });
        this.isDisabled = true;
        setTimeout(() => {
          uni.switchTab({
            url: '/pages/home/home',
          });
        }, 2000);
      }
    },
    // 立即查看
    toView() {
      this.$utils.toUrl(
        '/user/write_off_card/card-list/detail-card?id=' + this.id
      );
    },
  },
  computed: {
    disabled() {
      let flag = false;
      if (this.detailData.is_can_give == 0) {
        flag = true;
      }
      if (this.detailData.is_trans_send == 1) {
        flag = true;
      }
      if (this.isDisabled) {
        flag = true;
      }
      return flag;
    },
  },
};
</script>

<style lang="scss" scoped>
.get-card {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: #f86741;
  /deep/.u-model__footer {
    justify-content: center;
    margin-bottom: 48rpx;
  }
  /deep/.u-model__footer__button {
    flex: initial;
    width: 244rpx;
    height: 84rpx;
    line-height: 84rpx;
    border-radius: 42rpx;
    border: 1px solid #999;
    &:nth-child(2) {
      margin-left: 14rpx;
      color: #fff !important;
      background: #f0250e;
      border: 0;
    }
  }
}
.top-img {
  width: 100%;
  display: block;
  height: 684rpx;
}
.bottom-scroll {
  flex: 1;
  height: 0;
  padding-bottom: env(safe-area-inset-bottom);
  .item {
    position: relative;
    margin: 28rpx auto;
    border-radius: 10rpx;
    width: 702rpx;
    height: 206rpx;

    > image {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
    }
    > view {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      padding: 0 36rpx;
      .left-image {
        margin-right: 15rpx;
        width: 116rpx;
        height: 116rpx;
        background: #c78744;
        opacity: 1;
        border-radius: 12rpx;
      }
      .right-box {
        flex: 1;
        width: 0;
        .right-content {
          flex: 1;
          width: 0;
          > view:nth-child(1) {
            line-height: 40rpx;
            font-size: 28rpx;
            font-weight: bold;
            color: #46270f;
          }
          > view:nth-child(2) {
            margin-top: 18rpx;
            height: 28rpx;
            font-size: 20rpx;
            color: #46270f;
            text-shadow: 0rpx 3rpx 6rpx rgba(0, 0, 0, 0.16);
          }
        }
        .right-price-bt {
          display: flex;
          flex-direction: column;
          align-items: center;
          > view:nth-child(1) {
            height: 48rpx;
            font-size: 34rpx;
            font-weight: bold;
            color: #8b521e;
          }
          > view:nth-child(2) {
            margin-top: 8rpx;
            width: 128rpx;
            line-height: 48rpx;
            text-align: center;
            background: #ff4b33;
            border-radius: 60rpx;
            font-size: 22rpx;
            color: #ffffff;
          }
        }
      }
    }
  }
}
.getBox {
  width: 702rpx;
  padding: 24rpx;
  background-color: #fef1d9;
  border-radius: 20rpx;
  position: fixed;
  top: 420rpx;
  left: 50%;
  transform: translateX(-50%);
  .cardBox {
    width: 100%;
    .top {
      position: relative;
      border-radius: 20rpx 20rpx 0 0;
      border-bottom: 1px dashed #ededed;
      background-color: #fff;
      padding: 28rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      ::before {
        content: '';
        position: absolute;
        width: 20rpx;
        height: 20rpx;
        border-radius: 50%;
        background-color: #fef1d9;
        bottom: -10rpx;
        left: -10rpx;
      }
      ::after {
        content: '';
        position: absolute;
        width: 20rpx;
        height: 20rpx;
        border-radius: 50%;
        background-color: #fef1d9;
        bottom: -10rpx;
        right: -10rpx;
      }
      .name {
        display: flex;
        flex-direction: column;
        text:nth-child(1) {
          font-size: 30rpx;
          color: #262626;
          font-weight: 600;
        }
        text:nth-child(2) {
          font-size: 22rpx;
          color: #8c8c8c;
          margin-top: 10rpx;
        }
      }
      .price {
        .money {
          display: flex;
          align-items: baseline;
          color: #f0250e;
          font-weight: 600;
          text:nth-child(1) {
            font-size: 28rpx;
          }
          text:nth-child(2) {
            font-size: 56rpx;
          }
        }
        .title {
          font-size: 22rpx;
          color: #8c8c8c;
        }
      }
    }
    .bottom {
      border-radius: 0 0 20rpx 20rpx;
      background-color: #fff;
      padding: 24rpx 28rpx;
      .detailInfo {
        font-size: 24rpx;
        color: #8c8c8c;
        padding-bottom: 10rpx;
      }
      .detail {
        display: flex;
        align-items: center;
        font-size: 24rpx;
        color: #8c8c8c;
      }
    }
  }
  .getBtn {
    width: 574rpx;
    height: 100rpx;
    border-radius: 99px;
    margin: 40rpx auto 16rpx auto;
    background: linear-gradient(180deg, #ffa356 0%, #ff3640 100%);
    text {
      width: 100%;
      height: 100%;
      border-radius: 99px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 36rpx;
      font-weight: 600;
      color: #fff;
    }
  }
  .disabled {
    background: #c2c2c2;
  }
}
</style>
